export default {
	name: "SubmitResult",
	setup(props, { emit }) {
        const router = VueRouter.useRouter();
        const route = VueRouter.useRoute();
        const query = computed(() => route.query);
        const qrcodeCanvas = ref();
        
        // 计算属性
        const isReservation = computed(() => query.value.type === 'reservation')
        const showVerification = computed(() => query.value.code && query.value.code !== '')
        const statusIcon = computed(() => isReservation.value ? 'Select' : 'CircleCheck')
        const iconClass = computed(() => ({
        	'success-icon': true,
        	'reservation-icon': isReservation.value
        }))
        
        const headerText = computed(() =>
        	isReservation.value ? '预约成功' : '提交成功'
        )
        
        //下载二维码
        const downloadQRCode = () => {
            return ElMessage.error('在二维码图片上右键，将图片另存为');
        }
    
    	const viewRecord = () => {
    		router.push({name: 'mylist'});
    	}
    
    	const returnHome = () => {
    		router.push({name: 'home'});
    	}
    	
        return {
			query,
			isReservation,
			showVerification,
			statusIcon,
			iconClass,
			headerText,
			downloadQRCode,
			viewRecord,
			returnHome,
			qrcodeCanvas
		}
	},
	
	template: `
	<div style="padding: 20px; min-height: 500px; display: flex; justify-content: center;">
		<el-card style="width: 100%; max-width: 900px; margin-top: 40px;">
			<template #header>
				<div style="display: flex; align-items: center; justify-content: center; gap: 12px;">
					<el-icon :style="{
					fontSize: '28px',
					color: isReservation ? '#67C23A' : '#409EFF'
				}">
						<component :is="statusIcon" />
					</el-icon>
					<h2 style="margin: 0;">{{ headerText }}</h2>
				</div>
			</template>

			<div style="padding: 20px;">
				<el-descriptions :column="1" border>
					<el-descriptions-item label="表单名称" style="font-size: 14px;">
						{{ decodeURIComponent(query.formName) }}
					</el-descriptions-item>
					<el-descriptions-item label="提交时间">
						{{ $validators.formatDate(query.submitTime) }}
					</el-descriptions-item>

					<template v-if="isReservation">
						<el-descriptions-item label="预约日期">
							{{ $validators.formatDate(query.date, 'YYYY-MM-DD') }}
						</el-descriptions-item>
						<el-descriptions-item label="预约时段">
							{{ query.start }} - {{ query.end }}
						</el-descriptions-item>
						<el-descriptions-item label="排队序号">
							第 {{ query.sequence }} 号
						</el-descriptions-item>
					</template>
				</el-descriptions>

				<div v-if="showVerification" style="margin-top: 30px; text-align:center;">
					<el-divider>
						<el-icon style="vertical-align: middle;"><Stamp /></el-icon>
						<span style="vertical-align: middle;">核销信息</span>
					</el-divider>
					<div style="display: flex; justify-content: center; align-items: center; gap: 15px; padding: 15px; background: #f8f9fc; border-radius: 4px;">
                        <div style="padding:10px;">
                            <qrcode-vue ref="qrcodeCanvas" :value="query.code" render-as="canvas" :size="200"></qrcode-vue>
                            <div class="footer-text">核销码</div>
                        </div>
					</div>
					<div style="margin-top: 15px; color: #909399; display: flex; align-items: center; gap: 8px;">
						<el-icon><InfoFilled /></el-icon>
						<span>请妥善保存该核销码，作为业务办理凭证</span>
					</div>
				</div>

				<div style="margin-top: 40px; text-align: center;">
					<el-button v-if="showVerification" type="primary" @click="downloadQRCode" icon="Download" style="margin: 0 12px; min-width: 120px;">下载二维码</el-button>
					<el-button type="success" @click="viewRecord" icon="Tickets" style="margin: 0 12px; min-width: 120px;">查看记录</el-button>
					<el-button @click="returnHome" icon="House" style="margin: 0 12px; min-width: 120px;">返回首页</el-button>
				</div>
			</div>
		</el-card>
	</div>
	`
}